<!--分页  -->
<template>
<div class=''>
  <el-table
  :data="filterData" stripe border
  v-loading="loading"
  element-loading-text="玩命加载中"
  >
    <el-table-column prop="date" label='日期' width='200px'></el-table-column>
    <el-table-column prop="name" label='姓名'></el-table-column>
    <el-table-column prop="address" label='地址'></el-table-column>
  </el-table>
  <el-pagination
  layout="total, sizes, prev, pager, next, jumper"
  :total="tableData.length"
  :page-sizes="pageSizes"
  :page-size='10'
  @size-change="handleSizeChange"
  @current-change="handleCurrentChange"></el-pagination>
</div>
</template>

<script>
export default {
// import引入的组件需要注入到对象中才能使用
  components: {},
  data () {
    // 这里存放数据
    return {
      tableData: [
        {
          name: '岳云鹏',
          date: '20201010',
          address: '五环1'
        },
        {
          name: '马頔',
          date: '20201010',
          address: '南山'
        },
        {
          name: '岳云鹏',
          date: '20201010',
          address: '五环'
        },
        {
          name: '马頔',
          date: '20201010',
          address: '南山'
        },
        {
          name: '岳云鹏',
          date: '20201010',
          address: '五环'
        },
        {
          name: '马頔',
          date: '20201010',
          address: '南山'
        },
        {
          name: '岳云鹏',
          date: '20201010',
          address: '五环'
        },
        {
          name: '马頔',
          date: '20201010',
          address: '南山'
        },
        {
          name: '岳云鹏',
          date: '20201010',
          address: '五环'
        },
        {
          name: '马頔',
          date: '20201010',
          address: '南山1'
        },
        {
          name: '岳云鹏',
          date: '20201010',
          address: '五环'
        },
        {
          name: '马頔',
          date: '20201010',
          address: '南山'
        },
        {
          name: '岳云鹏',
          date: '20201010',
          address: '五环'
        },
        {
          name: '马頔',
          date: '20201010',
          address: '南山'
        },
        {
          name: '岳云鹏',
          date: '20201010',
          address: '五环'
        },
        {
          name: '马頔',
          date: '20201010',
          address: '南山2'
        },
        {
          name: '岳云鹏',
          date: '20201010',
          address: '五环'
        },
        {
          name: '马頔',
          date: '20201010',
          address: '南山3'
        },
        {
          name: '岳云鹏',
          date: '20201010',
          address: '五环'
        },
        {
          name: '马頔',
          date: '20201010',
          address: '南山5'
        }
      ],
      pageSize: 10,
      pageSizes: [1, 5, 10, 20, 30, 50, 100],
      pageNum: 1,
      loading: true
    }
  },
  // 监听属性 类似于data概念
  computed: {
    filterData: function () {
      console.log(this)
      const filterData = this.tableData.slice((this.pageNum - 1) * this.pageSize, this.pageNum * this.pageSize)
      // console.log(filterData)
      return filterData
    }
  },
  // 监控data中的数据变化
  watch: {},
  // 方法集合
  methods: {
    handleSizeChange: function (pageSize) {
      console.log(pageSize)
      this.pageSize = pageSize
    },
    handleCurrentChange: function (page) {
      console.log(page)
      this.pageNum = page
    }
  },
  // 生命周期 - 创建完成（可以访问当前this实例）
  created () {

  },
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted () {
    setTimeout(() => {
      this.loading = false
    }, 2000)
  },
  beforeCreate () {}, // 生命周期 - 创建之前
  beforeMount () {}, // 生命周期 - 挂载之前
  beforeUpdate () {}, // 生命周期 - 更新之前
  updated () {}, // 生命周期 - 更新之后
  beforeDestroy () {}, // 生命周期 - 销毁之前
  destroyed () {}, // 生命周期 - 销毁完成
  activated () {} // 如果页面有keep-alive缓存功能，这个函数会触发
}
</script>
<style  scoped>

</style>
